<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Cookies</title>
	<script>
		//setCookie
		function setCookie(name,value,iDay) {
			var oDate=new Date();
			oDate.setDate(oDate.getDate()+iDay);
			document.cookie=name+'='+value+';expires='+oDate.toUTCString();
		}

		//removeCookie
		function removeCookie(name){
			setCookie(name,1,-1)
		}
		
		//getCookies
		function getCookies(name) {
			var arr=document.cookie.split('; ');
			for(var i=0;i<arr.length;i++){
				var arr2=arr[i].split('=');
				if(arr2[0]==name){
					return arr2[1];
				}
			}
			return '';
		}

		window.onload=function () {
			var oForm=document.getElementById("form");
			var oName=document.getElementsByName("user")[0];
			var oPsd=document.getElementsByName("password")[0];
			var oCheck=document.getElementsByName("remenber")[0];

			if(getCookies('oName')!=''){
				oName.value=getCookies('oName');
			}
			if(getCookies('oPsd')!=''){
				oPsd.value=getCookies('oPsd');
				oCheck.checked=true;
			}

			oForm.onsubmit=function () {
				var day="";
				if(oCheck.checked){
					day=14;
				}else{
					day=-1;
					removeCookie('oPsd');
					removeCookie('oName');
				}
				setCookie('oPsd',oPsd.value,day);
				setCookie('oName',oName.value,day);
			}
		}
	</script>
</head>
<body>
	<form action="#" id="form" method="post">
		用户名: <input type="text" name="user"><br/>
		密  码: <input type="password" name="password"><br/>
		记住密码: <input type="checkbox" name="remenber"><br/>
		<p>选中记住密码的话，cookie将记住2周的时间。</p>
		<p>再次输入密码，取消选中的话。密码将被删除。</p>
		<p style="color: red">提交之后，请返回查看cookie</p>
		<input type="submit" value="提交">
	</form>
</body>
</html>